/**
 * Created by zzy on 2017/8/31.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
} from 'react-native';
import Modal from 'react-native-modalbox';
import {GradientRadiusButton} from '../component/Button'

const width=Dimensions.get('window').width;
export default class WaterTiketShowModal extends Component{

    render(){
        return <Modal
            position="center"
            ref={"tiketShowModal"}
            isOpen={false}
            backButtonClose={true}
            style={{
                backgroundColor:'rgba(0,0,0,0)',
                alignItems:'center',
                justifyContent:'center'
            }}
              >
            <View style={{alignItems:'center',borderRadius:8}}>
               <Image style={{alignItems:'center',justifyContent:'center',backgroundColor:'#ededed',borderTopLeftRadius:8,borderTopRightRadius:8}} source={require('../../asserts/ticket/shuipiao_tanchuang_head.png')}>
                   <TouchableOpacity
                       style={{position:'absolute',right:0,top:0,padding:10}}
                       activeOpacity={1}
                       onPress={()=>{
                           this._close();
                       }}
                   >
                      <Image  source={require('../../asserts/ticket/shuipiao_tanchuang_x.png')}></Image>
                   </TouchableOpacity>
                    <Text style={{color:'#399cfe',fontSize:16}}>您有0张水票可以使用</Text>
               </Image>
                <Image style={{alignItems:'center',justifyContent:'center',height:140}} source={require('../../asserts/ticket/shuipiao_tanchuang_content.png')}>
                    <WaterTiketCell/>
                    <WaterTiketCell/>
                </Image>
               <Image style={{alignItems:'center'}} source={require('../../asserts/ticket/shuipiao_tanchuang_foot.png')}>
                   <Text style={{marginTop:10,fontSize:12}}>打开"我的-水票"页面即可查看</Text>
               </Image>
            </View>
        </Modal>
    }

    _close(){
        this.refs.tiketShowModal.close();
    }
}

class WaterTiketCell extends Component{

    render(){
        return <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center',marginTop:5}}>

            <Image style={{alignItems:'center',justifyContent:'center'}} source={require('../../asserts/ticket/shuipiao_bg_left.png')}>
                <Text style={{color:'#F64F36',fontSize:15}}>10
                    <Text style={{fontSize:12}}>张</Text>
                </Text>
                <Text style={{color:'#F64F36',fontSize:12}}>平台通用</Text>
            </Image>
            <Image style={{flexDirection:'row',alignItems:'center'}} source={require('../../asserts/ticket/shuipiao_bg_right.png')}>
                <View style={{marginLeft:10,flex:1}}>
                    <Text style={{color:'black',fontSize:15}}>喜腾山泉</Text>
                    <Text style={{color:'#F64F36',marginTop:3,fontSize:12}}>天然纯净水18L</Text>
                </View>
                <View style={{marginRight:10,alignItems:'center'}}>
                    <Text style={{color:'#F64F36',marginBottom:3,fontSize:12}}>剩10日</Text>
                    <GradientRadiusButton
                        title="立即使用"
                        textStyle={{fontSize:12,color:'white'}}
                        style={{borderRadius: 15,
                            paddingHorizontal:5,
                            paddingVertical:3}}
                        colors={['#ff680f','#ff2d2d']}
                        onPress={()=>{

                        }}

                    />
                </View>
            </Image>
        </View>
    }
}